<template>
    <div>
      <div class="pd-tb-10-px">
        <span>格式：</span><code >[{title: '',contents:[]}]</code>
      </div>
      <el-input  v-model="value"  type="textarea" :autosize="{ maxRows: 4,minRows:4}"></el-input>
      <div class="pd-tb-10-px"><el-button @click="handlerText" size="small" >转换</el-button></div>
      <div>
        <el-tabs type="border-card" v-if="contents.length >0 ">
          <el-tab-pane :label="chapter.title" v-for="chapter in contents">
            <el-input  :value="chapter.contents.join('\n')"  type="textarea" :autosize="{ minRows: 2,maxRows: 20}"></el-input>
          </el-tab-pane>
        </el-tabs>
        <div class="pd-tb-10-px"><el-button @click="download" size="small"  v-if="contents.length >0 ">下载</el-button></div>
      </div>
    </div>

</template>

<script>
import http from "network/http";
import util from "utils/util";

export default {
  name: "JsonText",
  data(){
    return {
      value: '',
      contents: []
    }
  },
  methods:{
    download(){
      for(let i in this.contents){
        let text = this.contents[i].contents.join('\n')
        const blob = new Blob([text], { type: 'text/plain' });
        util.downLoad(blob,`${this.contents[i].title}.txt`)
      }
    },
    handlerText(){
      if(!this.value){
        this.$message.error("内容不可以为空")
        return ;
      }
      try{
        console.log(this.value)
       let v = this.value.replace(/[`|']/g,' ')
       this.contents = JSON.parse(v)
      }catch(e){

        this.$message.error("格式错误")
        throw e
      }
    }
  }
}

</script>

<style scoped>

</style>